/**
 * 楼层的户型信息
 * 
 * this.props.name   (T1)
 * this.props.buildingIntro  楼栋（T1）介绍
 * this.props.mdJson         描点数据
 * this.props.curFloorData  当然楼层的基本信息
 */


import React, { Component } from 'react';
import EventManager from '../utils/event.js'
// 楼栋信息键值对
const buildKey = {
    "Floor": "楼层",
    "Unit": "单元",
    "ResourcesType": "租赁资源类型",
    "RoomInfo": "租赁资源全称",
    "BldArea": "建筑面积",
    "TnArea": "套内面积",
    "KczArea": "可出租面积",
    "CurRentStatus": "当前租赁状态",
    "CstName": "当前租赁客商名称",
    "RentBgnDate": "当前租赁开始时间",
    "RentEndDate": "当前租赁截止时间",
    "Cg": "层高",
    "Hz": "荷载",
    "Power": "电量",
    "Gas": "燃气",
    "Gs": "给水",
    "Ps": "排水",
    "Kt": "空调"
}

import closePannelBtn from "../../img/closeInfoPannel.png";

class ProjectFloor extends Component {

    constructor(props) {
        super(props);

        console.log("目前楼层描点显示组件的属性：");
        console.log(this.props);

        this.state = { roomInfo: null, yzDivList: null, bigImg: null }; // 默认不显示详情
        // roomInfo 当前房型数据
        // yzDivList 当前房型已租提示DIV
        // bigImg  中间的大图，如果有数据，就直接弹出来
        this.onTouchEnd = this.onTouchEnd.bind(this);

        // 如果外层切换了楼层，那么隐藏信息栏
        this.onChangeFloors = this.onChangeFloors.bind(this);
        EventManager.getInstance().addEvent('changeFloors', this.onChangeFloors);
    }

    componentDidMount() {
        console.log(1);
        // this.setState({ yzDivList: yzDivList });
    }
    componentWillUnmount() {
        EventManager.getInstance().removeEvent('changeFloors', this.onChangeFloors);
    }
    onChangeFloors = () => {
        this.hideInfoPage();
    }

    createRentMask = () => {
        // 根据描点数据，搜索真实数据的租赁状态，并生成灰色覆盖DIV
        var h = this.props.mdJson.fileHeight;
        var w = this.props.mdJson.fileWidth;

        const mdJsonData = this.props.mdJson.data;
        const headName = this.props.name;
        const floorName = this.props.floorName;
        const curFloorData = this.props.curFloorData;
        let yzDivList = [];  // 已租状态Divs
        for (let i = 0; i < mdJsonData.length; i++) {
            for (let j = 0; j < curFloorData.length; j++) {
                if (curFloorData[j].RoomInfo.indexOf(headName + '-' + floorName + '-' + mdJsonData[i].name) > -1 && curFloorData[j].CurRentStatus !== "待租") {
                    // if (headName + '-' + floorName + '-' + mdJsonData[i].name === curFloorData[j].RoomInfo
                    // && curFloorData[j].CurRentStatus !== "待租") {
                    console.log('已租列表：')
                    console.log(curFloorData[j].RoomInfo);
                    let mdItem = mdJsonData[i];
                    let style = {
                        width: mdItem.w / w * 100 + '%',
                        height: mdItem.h / h * 100 + '%',
                        top: mdItem.y / h * 100 + '%',
                        left: mdItem.x / w * 100 + '%'
                    }

                    // 房源名字

                    yzDivList.push(<div key={i} title={curFloorData[j].RoomInfo} className="yzMask" style={style}><p>{curFloorData[j].CstName}</p></div>);
                    break;
                }
            }
        }
        return yzDivList;
    }

    clickReturnBtn = () => {

    }

    checkTouch = (xp, yp) => {
        let list = this.props.mdJson.data;
        let w = this.props.mdJson.fileWidth;
        let h = this.props.mdJson.fileHeight;
        for (let i = 0; i < list.length; i++) {
            let item = list[i];
            let x = item.x / w;
            let y = item.y / h;
            let x2 = (item.w + item.x) / w;
            let y2 = (item.h + item.y) / h;

            if (xp >= x && xp <= x2 && yp >= y && yp <= y2) {
                // 点击到了RN
                this.checkWhereRoom(item.name);
                console.log(item.name);
                return;
            }
        }

        // 没点到RN,弹出大图片
        this.setState({ bigImg: '../../../img/floors/big/' + this.props.mdJson.fileName })
    }

    /**
     *  
     */

    checkWhereRoom = (name) => {
        for (let i = 0; i < this.props.curFloorData.length; i++) {
            let item = this.props.curFloorData[i];
            let roomInfoArry = item.RoomInfo.split('-');
            let roomName = roomInfoArry[roomInfoArry.length - 1];
            if (roomName === name) {
                this.setState({ roomInfo: item });
                this.showInfoPage();
                return;
            }
        }
        this.hideInfoPage();

    }

    showInfoPage = () => {
        this.refs.left.style.transform = "translateX(0)"
        this.refs.right.style.transform = "translateX(0)"
    }

    hideInfoPage = () => {
        this.refs.left.style.transform = "translateX(-100%)"
        this.refs.right.style.transform = "translateX(100%)"
    }

    closeBigImg = () => {
        this.setState({ bigImg: null })
    }

    onTouchEnd = (e) => {
        e.preventDefault();
        // 获得rem相对的px
        let touchImgMask = this.refs.touchImgMask;
        const height = touchImgMask.offsetHeight;
        const width = touchImgMask.offsetWidth;

        const offsetLeft = document.body.clientWidth / 2 - width / 2;
        const offsetTop = document.body.clientHeight / 2 - height / 2;

        if (e.changedTouches.length === 1) {
            var touchY = e.changedTouches[0].clientY - offsetTop;
            var touchX = e.changedTouches[0].clientX - offsetLeft;
            this.checkTouch(touchX / width, touchY / height);
        }
    }

    render() {

        // 初始化图片
        const floorMdImgUrl = "../../../img/floors/" + this.props.mdJson['fileName'];
        // 如果图片不超过边界，就按固定高处理
        let imgHeight = 391;
        let imgWidth = (391 / this.props.mdJson.fileHeight) * this.props.mdJson.fileWidth; // 391时的宽

        let ImgWH = { height: imgHeight / 100 + 'rem' };
        let ImgWH2 = { height: imgHeight / 100 + 'rem', width: imgWidth / 100 + 'rem' };

        if (imgWidth > 1000) {
            ImgWH = { width: '10rem' };
            ImgWH2 = { width: '10rem', height: (1000 / this.props.mdJson.fileWidth) * this.props.mdJson.fileHeight / 100 + 'rem' };
        }


        // 楼栋信息简介
        const intro = this.props.buildingIntro;
        let PDomList = [];
        for (let i in intro) {
            let p = <p key={i} ><span className="pf-rightIntro-span-one">{i + "："}</span><span className="pf-rightIntro-span-two" dangerouslySetInnerHTML={{ __html: intro[i] }}></span></p>
            PDomList.push(p);
        }

        // 楼层中的户型介绍
        const roomInfo = this.state.roomInfo;
        let FPDomList = [];
        for (let i in roomInfo) {
            let name = buildKey[i];
            let value = roomInfo[i];
            if (i === "BldArea" || i === "TnArea" || i === "KczArea") {
                value = value + '㎡'
            }
            if (!buildKey[i]) continue;

            let p = <p key={i} ><span className="pf-leftIntro-span-one">{name + "："}</span><span className="pf-leftIntro-span-two ">{value}</span></p>
            FPDomList.push(p);
        }

        // 弹出的大图
        let centerBigImg = null;
        if (this.state.bigImg) {
            centerBigImg = <div className="bigimg-mask"> <img className="centerBigImg" src={this.state.bigImg} onTouchEnd={this.closeBigImg} alt="" /></div>
        }

        const yzDivList = this.createRentMask();
        return (
            <div className="floorPage cch-blackBg">

                <div className="pf-left-intro" ref="left" onClick={this.hideInfoPage}>
                    <img src={closePannelBtn} className="closePannelBtn" onClick={this.hideInfoPage} alt="" />
                    <div>
                        {FPDomList}
                    </div>
                </div>

                {/* 中间的户型图 */}
                <img className="pb-center-touchImg" src={floorMdImgUrl} alt="" style={ImgWH} />


                {/* 中间的已租状态遮罩层 */}
                <div className="touchImgMask" onTouchEnd={this.onTouchEnd} style={ImgWH2} ref="touchImgMask">
                    {yzDivList}
                </div>

                {centerBigImg}

                {/* 出租状态 */}
                <div className="pf-yz"><span></span>已租</div>
                <div className="pf-dz"><span></span>待租</div>



                <div className="pf-right-intro" ref="right" onClick={this.hideInfoPage}>
                    <div>
                        {PDomList}
                    </div>
                </div>

                <a className="returnBtn" onClick={this.props.onCloseFloorPage}>返回</a>
                <a className="floorBtn" onClick={this.props.onOpenSelectFloorsPanel}>{this.props.floorName + "F"}</a>
            </div >
        )

    }
}

export default ProjectFloor;